<template>
  <el-dialog
      v-model="dialogVisible"
      title="添加活动"
      width="600px"
  >
    <el-form :model="formData" label-width="100px">
      <!-- 课程类别选择 -->
      <el-form-item label="活动类型:" required>
        <el-select
            v-model="formData.category"
            placeholder="请选择课程类别"
            style="width: 100%"
        >
          <el-option
              v-for="category in courseCategories"
              :key="category.category"
              :极label="category.category"
              :value="category.category"
          />
        </el-select>
      </el-form-item>

      <!-- 具体课程名称（输入框） -->
      <el-form-item label="活动名称:" required>
        <el-input
            v-model="formData.activityName"
            placeholder="请输入活动名称"
            style="width: 100%"
        />
      </el-form-item>

      <!-- 场地选择（写死的选项） -->
      <el-form-item label="活动场地:" required>
        <el-select
            v-model="formData.classroomId"
            placeholder="请选择场地"
            style="width: 100%"
        >
          <el-option
              v-for="classroom in fixedClassrooms"
              :key="classroom.id"
              :label="classroom.name"
              :value="classroom.id"
          />
        </el-select>
      </el-form-item>

      <!-- 活动日期 -->
      <el-form-item label="活动日期:" required>
        <el-date-picker
            v-model="formData.specificDate"
            type极="date"
            placeholder="请选择日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <!-- 时间节次 -->
      <el-form-item label="时间节次:" required>
        <el-select
            v-model="formData.timeSlotId"
            placeholder="请选择节次"
            style="width: 100%"
        >
          <el-option
              v-for="(lesson, index) in lessons"
              :key="index"
              :label="`第${index + 1}节 (${lesson.time})`"
              :value="index + 1"
          />
        </el-select>
      </el-form-item>

      <!-- 活动描述（可选） -->
      <el-form-item label="活动描述:">
        <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="请输入活动描述（可选）"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认添加</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  weekDays: Array,
  lessons: Array,
  courseCategories: Array
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 写死的场地数据
const fixedClassrooms = [
  { id: 1, name: '201教室' },
  { id: 2, name: '203教室' },
  { id: 3, name: '205教室' },
  { id: 4, name: '实验室1' },
  { id: 5, name: '实验室2' }
];

const formData = reactive({
  category: '',
  activityName: '',
  classroomId: null,
  specificDate: '',
  timeSlotId: null,
  description: ''
});

const handleConfirm = () => {
  if (!formDataValid.value) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  // 获取选中场地的名称
  const selectedClassroom = fixedClassrooms.find(c => c.id === formData.classroomId);

  emit('confirm', {
    category: formData.category,
    activityName: formData.activityName,
    classroomId: formData.classroomId,
    classroomName: selectedClassroom ? selectedClassroom.name : '',
    specificDate: formData.specificDate,
    timeSlotId: formData.timeSlotId,
    description: formData.description
  });

  dialogVisible.value = false;
  resetForm();
};

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    category: '',
    activityName: '',
    classroomId: null,
    specificDate: '',
    timeSlotId: null,
    description: ''
  });
};

// 表单验证
const formDataValid = computed(() => {
  return formData.category &&
      formData.activityName &&
      formData.classroomId &&
      formData.specificDate &&
      formData.timeSlotId;
});
</script>
